<template>
  <div class="tit01">员工结构分析</div>
  <div class="">
    <div style="float: left; width: 50%; height: 170px" ref="genderChart"></div>
    <div style="float: left; width: 50%; height: 170px" ref="ageChart"></div>
  </div>
  <div class="leidanav leidanav2">
    <ul class="clearfix">
      <li><span>总人数</span><p>{{ employeeData.total }}</p></li>
      <li><span>男职员</span><p>{{ employeeData.male }}</p></li>
      <li><span>女职员</span><p>{{ employeeData.female }}</p></li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const genderChart = ref(null)
const ageChart = ref(null)
let genderChartInstance = null
let ageChartInstance = null

const employeeData = ref({
  total: 2580,
  male: 1280,
  female: 1300
})

const initCharts = () => {
  // 性别分布图
  if (genderChart.value) {
    genderChartInstance = echarts.init(genderChart.value)
    const genderOption = {
      color: ['#29D9D5', '#FF6B9D'],
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: employeeData.value.male, name: '男职员' },
          { value: employeeData.value.female, name: '女职员' }
        ],
        label: { color: '#fff' }
      }]
    }
    genderChartInstance.setOption(genderOption)
  }
  
  // 年龄分布图
  if (ageChart.value) {
    ageChartInstance = echarts.init(ageChart.value)
    const ageOption = {
      color: ['#3C8BFF', '#4A5DDE', '#5A3EC8', '#29D9D5'],
      series: [{
        type: 'pie',
        radius: '60%',
        data: [
          { value: 580, name: '20-30岁' },
          { value: 980, name: '30-40岁' },
          { value: 720, name: '40-50岁' },
          { value: 300, name: '50岁以上' }
        ],
        label: { color: '#fff', fontSize: 10 }
      }]
    }
    ageChartInstance.setOption(ageOption)
  }
}

onMounted(() => {
  initCharts()
})

onUnmounted(() => {
  if (genderChartInstance) genderChartInstance.dispose()
  if (ageChartInstance) ageChartInstance.dispose()
})
</script>
